<template>
    <div class="bankingInformationPage">
        <el-radio-group v-model="tabPosition" style="margin-bottom: 30px" @change="change">
            <el-radio-button label="1">实时余额</el-radio-button>
            <el-radio-button label="0">历史余额</el-radio-button>
        </el-radio-group>
        <div class="search-wrap d-flex a-center" v-if="tabPosition==='1'">
            <div class="search-item d-flex a-center m-l20">
                <label>单位名称</label>
                <el-input class="m-l10" v-model="form.companyName" placeholder="请输入单位名称"></el-input>
            </div>
            <div class="search-item d-flex a-center m-l20">
                <label>开户行</label>
               <el-input class="m-l10" v-model="form.bankAccountName" placeholder="请输入开户行"></el-input>
            </div>
            <div class="search-item d-flex a-center m-l20">
                <label>账户类型</label>
                <el-select class="m-l10" v-model="form.accountType" clearable>
                    <el-option label="基本户" value="1"></el-option>
                    <el-option label="一般户" value="2"></el-option>
                </el-select>
            </div>
            <div class="search-buttons m-l50 d-flex a-center">
                <el-button
                        color="#fc702b"
                        style="color:#fff;"
                        @click.prevent="onQuery"
                >查询</el-button>
                <el-button
                        color="#f0f0f0"
                        style="color: #000000"
                        @click.prevent="onReset"
                >重置</el-button>
                <el-divider direction="vertical" />
                <el-button
                        @click="onImportType('1')"
                        class="button_edit m-r10"
                >
                    <svg-icon icon-class="project-detail-icon-l-xiazai" class="icon-export m-r5"></svg-icon>
                    导入
                </el-button>
                <el-button
                        class="button_edit"
                        @click="onExportType('1')"
                >
                    <svg-icon icon-class="project-detail-icon-derive" class="icon-export m-r5"></svg-icon>
                    一键导出
                </el-button>
            </div>
        </div>
        <div class="search-wrap d-flex a-center flex-wrap" v-if="tabPosition==='0'">
            <div class="search-item d-flex a-center m-l20 m-b10">
                <label>交易日期</label>
                <el-date-picker
                    class="m-l10"
                    v-model="form.dateTime"
                    value-format="YYYY-MM-DD"
                    type="daterange"
                    size="large"
                    range-separator="-"
                    start-placeholder="开始时间"
                    end-placeholder="结束时间"
                    @change="datePickerChange"
                />
            </div>
            <div class="search-item d-flex a-center m-l20">
                <label>单位名称</label>
                <el-input class="m-l10" v-model="form.companyName" placeholder="请输入单位名称"></el-input>
            </div>
            <div class="search-item d-flex a-center m-l20">
                <label>开户行</label>
                <el-input class="m-l10" v-model="form.bankAccountName" placeholder="请输入开户行"></el-input>
            </div>
            <div class="search-item d-flex a-center m-l20">
                <label>账户类型</label>
                <el-select class="m-l10" v-model="form.accountType" clearable>
                    <el-option label="基本户" value="1"></el-option>
                    <el-option label="一般户" value="2"></el-option>
                </el-select>
            </div>
            <div class="search-buttons m-l50 d-flex a-center">
                <el-button
                    color="#fc702b"
                    style="color:#fff;"
                    @click.prevent="onQuery"
                >查询</el-button>
                <el-button
                    color="#f0f0f0"
                    style="color: #000000"
                    @click.prevent="onReset"
                >重置</el-button>
                <el-divider direction="vertical" />
                <el-button
                    @click="onImportType('0')"
                    class="button_edit m-r10"
                >
                    <svg-icon icon-class="project-detail-icon-l-xiazai" class="icon-export m-r5"></svg-icon>
                    导入
                </el-button>
                <el-button
                    class="button_edit"
                    @click="onExportType('0')"
                >
                    <svg-icon icon-class="project-detail-icon-derive" class="icon-export m-r5"></svg-icon>
                    一键导出
                </el-button>
            </div>
        </div>
        <public-table
                ref="publicTableRef"
                class="m-t20"
                index
                :indexWidth="'100'"
                :page="page"
                :height="550"
                :tableData="tableData"
                :tableOption.sync="tabPosition==='1'?tableOption:tableOption2"
                @page-change="onPageChange"
        ></public-table>
    </div>

    <import-file-popup
        :title="title"
        :is-tip="true"
        ref="importFilePopupRef"
        :interface-config="{fileName:'businessFinance',apiPath:'CBS.importBalance'}"
        :template-config="templateConfig"
        @on-success="onQuery"
    />
</template>

<script setup>
import {onMounted, reactive, ref} from "vue";
import {
    ElSelect,
    ElOption,
    ElDivider,
    ElUpload, ElLoading, ElMessage,
    ElRadioGroup,
    ElRadioButton, ElDatePicker
} from "element-plus";
import PublicTable from "@/components/PublicTable.vue";

import {tableCommonFun} from "@/hooks/tableCommon";
import {companyApi} from "@/api/businessFinance";
import {exportExcelFile} from "@/common/utils/GlobalUtils";
import PublicDialog from "@/components/PublicDialog.vue";
import {UploadFilled} from "@element-plus/icons-vue";
import ImportFilePopup from "@/components/importFilePopup.vue";

const title = ref('实时余额表');
const interfaceConfig = reactive({
    fileName:'businessFinance',
    apiPath:'CBS.getBankBalance',
});
const importFileInterfaceConfig = reactive({
    fileName:'businessFinance',
    apiPath:'CBS.importBalance',
});
const exportConfig = reactive({
    fileName:'businessFinance',
    apiPath:'CBS.getBankBalanceLeadingOut',
    tableName:'银行实时余额表'
});
const templateConfig = reactive({
    fileName:'businessFinance',
    apiPath:'CBS.downloadMB',
    param:{type:1},
    templateName:'银行实时余额表模版'
});

const tabPosition  = ref('1');
const defaultParameters = reactive({
    type:1
});

const {
    form,
    page,
    tableOption,
    tableData,
    onQuery,
    onReset,
    onPageChange,
    getData,
    onExport
}  = tableCommonFun(interfaceConfig,exportConfig,defaultParameters);

form.value = {
    dateTime: '',
    bankAccountName: '',
    accountType: '',
    startTime:'',
    endTime:''
}

tableOption.value = [
    { label: "银行账户号", prop: "bankAccountId", minWidth: 150 },
  { label: "账户名称 ", prop: "accountName", minWidth: 150 },
  { label: "开户行", prop: "bankAccountName", minWidth: 120 },
  { label: "单位名称", prop: "companyName", minWidth: 120 },
  {
    label: "账户性质", prop: "accountType", formatter: (val, row) => {
      return ['', '基本户', '一般户'][val] || '-';
    }, minWidth: 100
  },
  { label: "账户余额", prop: "balance", minWidth: 100 },
  { label: "冻结金额", prop: "freezeBalance", minWidth: 100 },
  { label: "可用余额", prop: "availableBalance", minWidth: 100 },
  { label: "更新时间", prop: "cbsTime", minWidth: 100 },
];

const tableOption2 = ref([]);
tableOption2.value = [
    { label: "交易时间", prop: "tradeTime", minWidth: 150 },
    { label: "银行账户号", prop: "bankAccountId", minWidth: 150 },
    { label: "账户名称 ", prop: "accountName", minWidth: 150 },
    { label: "开户行", prop: "bankAccountName", minWidth: 120 },
    { label: "单位名称", prop: "companyName", minWidth: 120 },
    {
        label: "账户性质", prop: "accountType", formatter: (val, row) => {
            return ['', '基本户', '一般户'][val] || '-';
        }, minWidth: 100
    },
    { label: "账户余额", prop: "balance", minWidth: 100 },
    { label: "冻结金额", prop: "freezeBalance", minWidth: 100 },
    { label: "可用余额", prop: "availableBalance", minWidth: 100 },
    { label: "更新时间", prop: "cbsTime", minWidth: 100 },
];

const companyList = ref([]);
/**
 * 查公司列表
 */
const getCompanyList = () => {
    companyApi.getList({}).then(res=>{
        companyList.value = res.data;
    });
}

/**
 * 查询银行列表
 *
 */
const bankAccountList = ref([]);
const getBankList = () => {
    companyApi.getBankList().then(res=>{
        if(res.code === '200'){
            bankAccountList.value = res.data;
        }
    });
}

const visible = ref(false);
const onConfirm = () => {

}

const importFilePopupRef = ref(null);
const onImport = () => {
    importFilePopupRef.value.openPopup();
}

const uploadFile = (file) => {
    const loading = ElLoading.service({
        lock: true,
        text: "Loading",
        background: "rgba(0, 0, 0, 0.7)",
    });
    let uploadFile = new FormData();
    uploadFile.append("file", file.file);
    companyApi.importExcel(uploadFile).then(res=>{
        if (res.code === '200') {
            loading.close();
            ElMessage.success("上传成功!");
            visible.value = false;
            getData({
                pageNum:1,
                pageSize:10
            });
        }else{
            loading.close();
            ElMessage.error("上传失败!请联系管理员。");
        }
    });
}

/**
 *
 * @param e
 */
const change = (e) => {
    defaultParameters.type = e;
    onQuery();
}

const datePickerChange = (e) => {
    if(e===null || (e instanceof Array && e.length===0)){
        form.value.startTime = '';
        form.value.endTime = '';
        return;
    }
    form.value.startTime = e[0];
    form.value.endTime = e[1];
}

/**
 * 导入
 * @param type
 */
const onImportType = (type) => {
    if(type==='1'){
        title.value = '导入银行信息实时余额表';
        importFileInterfaceConfig.apiPath = 'CBS.importBalance';
        templateConfig.param.type = 1;
        templateConfig.templateName = '银行信息实时余额表模版';
    }
    if(type==='0'){
        title.value = '导入银行信息历史余额表';
        importFileInterfaceConfig.apiPath = 'CBS.importHisBalance';
        templateConfig.param.type = 2;
        templateConfig.templateName = '银行信息历史余额表模版';
    }
    onImport();
}

/**
 * 导出
 * @param type
 */
const onExportType = (type) => {
    if(type==='1'){
        exportConfig.apiPath = 'CBS.getBankBalanceLeadingOut';
        exportConfig.tableName = '银行信息实时余额表';
    }
    if(type==='0'){
        exportConfig.apiPath = 'CBS.getBankHisBalanceLeadingOut';
        exportConfig.tableName = '银行信息历史余额表';
    }
    onExport();
}

onMounted(()=>{
    getData({
        pageNum:1,
        pageSize:50,
        ...defaultParameters
    });
    getCompanyList();
    getBankList();
});
</script>

<style lang="scss" scoped>
.bankingInformationPage{
  .search-wrap{
    .search-item{
      .el-input{
        width: auto !important;
      }
    }
    .search-buttons{
      .icon-export{
        width: 18px;
        height: 18px;
      }
    }
  }
}
.public-dialog-content{
  .dialog-title-box{
    height: 30px;
    span{
      font-size: 15px;
      font-weight: 600;
    }
  }
}
</style>
